<script setup lang="ts">
import { ref, reactive } from "vue";
import { graphic } from "echarts/core";
import { countUserNum } from "@/api";
import {ElMessage} from "element-plus"

let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
const option = ref({});
const state = reactive({
  lockNum: 0,
  offlineNum: 0,
  onlineNum: 0,
  alarmNum: 0,
  totalNum: 0,
});
const echartsGraphic = (colors: string[]) => {
  return new graphic.LinearGradient(1, 0, 0, 0, [
    { offset: 0, color: colors[0] },
    { offset: 1, color: colors[1] },
  ]);
};
const getData = () => {
  countUserNum().then((res) => {
    console.log("左中--用户总览",res);
    if (res.success) {
      state.lockNum = res.data.lockNum;
      state.offlineNum = res.data.offlineNum;
      state.onlineNum = res.data.onlineNum;
      state.totalNum = res.data.totalNum;
      state.alarmNum = res.data.alarmNum;
      setOption();
    }else{
      ElMessage.error(res.msg)
    }
  }).catch(err=>{
    ElMessage.error(err)
  });
};
getData();
// const setOption = () => {
//   option.value = {
//     title: {
//       top: "center",
//       left: "center",
//       text: [`{value|${state.totalNum}}`, "{name|总数}"].join("\n"),
//       textStyle: {
//         rich: {
//           value: {
//             color: "#ffffff",
//             fontSize: 24,
//             fontWeight: "bold",
//             lineHeight: 20,
//             padding:[4,0,4,0]
//           },
//           name: {
//             color: "#ffffff",
//             lineHeight: 20,
//           },
//         },
//       },
//     },
//     tooltip: {
//       trigger: "item",
//       backgroundColor: "rgba(0,0,0,.6)",
//       borderColor: "rgba(147, 235, 248, .8)",
//       textStyle: {
//         color: "#FFF",
//       },
//     },
//     series: [
//       {
//         name: "用户总览",
//         type: "pie",
//         radius: ["40%", "70%"],
//         // avoidLabelOverlap: false,
//         itemStyle: {
//           borderRadius: 6,
//           borderColor: "rgba(255,255,255,0)",
//           borderWidth: 2,
//         },
//         color: colors,
//         label: {
//           show: true,
//           formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
//           //   position: "outside",
//           rich: {
//             b: {
//               color: "#fff",
//               fontSize: 12,
//               lineHeight: 26,
//             },
//             c: {
//               color: "#31ABE3",
//               fontSize: 14,
//             },
//             per: {
//               color: "#31ABE3",
//               fontSize: 14,
//             },
//           },
//         },
//         emphasis: {
//           show: false,
//         },
//         legend: {
//           show: false,
//         },
//         tooltip: { show: true },

//         labelLine: {
//           show: true,
//           length: 20, // 第一段线 长度
//           length2: 36, // 第二段线 长度
//           smooth: 0.2,
//           lineStyle: {},
//         },
//         data: [
//           {
//             value: state.onlineNum,
//             name: "在线",
//             itemStyle: {
//               color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
//             },
//           },
//           {
//             value: state.offlineNum,
//             name: "离线",
//             itemStyle: {
//               color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
//             },
//           },
//           {
//             value: state.lockNum,
//             name: "锁定",
//             itemStyle: {
//               color: echartsGraphic(["#F48C02", "#FDDB7D"]),
//             },
//           },
//           {
//             value: state.alarmNum,
//             name: "异常",
//             itemStyle: {
//               color: echartsGraphic(["#F4023C", "#FB6CB7"]),
//             },
//           },
//         ],
//       },
//     ],
//   };
// };
</script>

<template>
  <div class="ajlist">
    <div class="card">
      <div class="pressitem">
        <img src="../../../static/自杀.png" alt="">
      </div>
        <!-- <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">人民调解</div> -->
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">当事人有</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">自杀倾向</div>
        <div class="ajnshkqsa" style="width: 100%;display: flex;justify-content: center;color: red;">586件</div>
      </div>
    <div class="card">
      <div class="pressitem">
        <img src="../../../static/刑事案件.png" alt="">
      </div>
        <!-- <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">行专调解</div> -->
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">有转化为刑</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">事案件可能</div>
        <div class="ajnshkqsa" style="width: 100%;display: flex;justify-content: center;color: red;">1517件</div>
      </div>
    <div class="card">
      <div class="pressitem">
        <img src="../../../static/命案防控管理.png" alt="">
      </div>
        <!-- <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">行政调解</div> -->
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">有发生</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">命案可能</div>
        <div class="ajnshkqsa" style="width: 100%;display: flex;justify-content: center;color: red;">422件</div>
      </div>
    <div class="card">
      <div class="pressitem">
        <img src="../../../static/icons-iicon.png" alt="">
      </div>
        <!-- <div class="ajnshkqq" style="width: 100%;display: flex;justify-content: center;">行政调解</div> -->
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">有集体</div>
        <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">上访可能</div>
        <div class="ajnshkqsa" style="width: 100%;display: flex;justify-content: center;color: red;">12件</div>
      </div>
    <div class="card">
      <div class="pressitem">
        <img src="../../../static/186.png" alt="">
      </div>
      <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">有群体</div>
      <div class="ajnshkqs" style="width: 100%;display: flex;justify-content: center;">械斗可能</div>
      <div class="ajnshkqsa" style="width: 100%;display: flex;justify-content: center;color: red;">698件</div>
      </div>

  </div>
</template>

<style scoped lang="scss">
.ajnshkqsa{
  margin-top: 8px;
  font-size: 22px;
  font-weight: bold;
}
.pressitem{
  img{
    height: 50px;
    width: 50px;
  }
}
.heidasd{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ajnshkqs{
  color: #00eaff;
  font-weight: bold;
}
.ajnshkqq{
  color: #c0f4f9;
  font-size: 14px;
}
.pressitem{
  height: 50%;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}
:deep() .el-progress path:first-child {
    // 修改进度条背景色
    stroke: #1b8d87;
}
:deep() .el-progress__text {
    // 修改进度条文字提示颜色
    color: #4ed16f;
}


.iida{
  color: #1949a3;
}
.card{
  height: 80%;
  width: 150px;
  // border: 1px solid rgb(50, 143, 143);
  // box-shadow:2px 0px 8px 4px rgba(49, 114, 134, 0.5);
  
}
.ajlist{
  height: 95%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
